<template>
  <view class="message-page">
    <view class="title">
      <text>消息通知</text>
      <up-icon style="align-self: end; margin-bottom: -1vw" name="trash" color="#000" size="8.4vw"></up-icon>
    </view>
    <view class="main">
      <view class="options">
        <view class="option-item">
          <up-icon name="chat" color="#fff" style="margin-top: 0.3vw" size="5.2vw"></up-icon>
          <text class="description">消息</text>
        </view>
        <view class="option-item">
          <up-icon name="plus-people-fill" color="#fff" style="margin-top: 0.3vw" size="4.6vw"></up-icon>
          <text class="description">粉丝</text>
        </view>
        <view class="option-item">
          <up-icon name="heart-fill" color="#fff" style="margin-top: 0.24vw" size="4.5vw"></up-icon>
          <text class="description">喜欢</text>
        </view>
      </view>
      <view class="message-notice">
        <text class="topic">全部私信</text>
        <view class="main-body">
          <noticeItem v-for="(item, index) in noticeList" :key="index" :item="item"></noticeItem>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import noticeItem from './components/noticeItem.vue';
import { reactive } from 'vue';
import sortByDateTime from '@/utils/sortByDateTime.js';

const itemList = reactive([
  {
    avatarUrl: '../../static/avatars/avatar0.png',
    sender: '太酷不给撩',
    lastTime: '2023-10-15 14:30',
    content: 'Hi~ 你的摄影很棒诶！线条优美，光线柔和，祝你可以再拍出更好看的照片',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar1.png',
    sender: '魅力本人',
    lastTime: '2025-07-10 13:20',
    content: '你的作品好赞',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar2.png',
    sender: '野猫梁上走',
    lastTime: '2025-07-10 00:20',
    content: '哇，可以加好友吗？',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar3.png',
    sender: '傲气稳了全场',
    lastTime: '2025-07-08 13:20',
    content: 'Hi~ 你的摄影很棒诶！！',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar4.png',
    sender: '有杀气的萝莉',
    lastTime: '2025-05-21 13:20',
    content: 'Hi~ 你的摄影很棒诶！！',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar0.png',
    sender: '太酷不给撩',
    lastTime: '2023-10-15 14:30',
    content: 'Hi~ 你的摄影很棒诶！线条优美，光线柔和，祝你可以再拍出更好看的照片',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar1.png',
    sender: '魅力本人',
    lastTime: '2025-07-08 08:20',
    content: '你的作品好赞',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar2.png',
    sender: '野猫梁上走',
    lastTime: '2025-07-01 23:20',
    content: '哇，可以加好友吗？',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar3.png',
    sender: '傲气稳了全场',
    lastTime: '2025-03-08 13:20',
    content: 'Hi~ 你的摄影很棒诶！！',
    isRead: false
  },
  {
    avatarUrl: '../../static/avatars/avatar4.png',
    sender: '有杀气的萝莉',
    lastTime: '2024-05-21 12:20',
    content: 'Hi~ 你的摄影很棒诶！！',
    isRead: true
  }
]);

const noticeList = reactive(sortByDateTime(itemList, 'lastTime'));
</script>

<style lang="scss">
@import './index.scss';
</style>
